import React, { useState, useEffect } from 'react'
import { Form, Input, InputNumber, Tag } from '@bytedance/mona-ui'
// import FingerprintJS from 'https://wtplug.oss-cn-hangzhou.aliyuncs.com/file/v4.js'
// let FingerprintJS = ''
// 			const fpPromise = import(
// 				'https://wtplug.oss-cn-hangzhou.aliyuncs.com/file/v4.js'
// 			).then((FingerprintJSf) => {
// 				FingerprintJS = FingerprintJSf
// 				return FingerprintJSf.load()
// 			})

function ROIcompute() {

    let infoOrdData = {
        chengbeng: 0,
        baozhuang: 0,
        kuaidi: 0,
        yunfeixian: 0,
        qita: 0,

        changpingdinjia: 0,
        pingtaikoudian: 0,

        yuguxiaoshoushulian: 0,

        fahuoqiangtuihuolv: 0,
        fahuohoujintuikuanlv: 0,
        tuihuokuiakuanlv: 0,

        tuihuohuishoulv: 0,

        zhubogonzhi: 0,
        zhubotidian: 0,
        qitachengyuangongzi: 0,
        qitachengyuangtidian: 0,
        fangzhushuidian: 0,
        guangaofeiad: 0
    }
    try {
        const gterinitdata = localStorage.getItem('foterInter')
        const tojson = JSON.parse(gterinitdata || '')
        infoOrdData = tojson
    } catch (error) {

    }
    const [foterInter, setFoterInter] = useState(infoOrdData)

    const jichuchengbeng = Number((foterInter.chengbeng + foterInter.baozhuang + foterInter.kuaidi + foterInter.yunfeixian + foterInter.qita).toFixed(2))
    const maolirun = Number((foterInter.changpingdinjia - (foterInter.pingtaikoudian / 100) * foterInter.changpingdinjia - jichuchengbeng).toFixed(2))
    const maolilv = foterInter.changpingdinjia ? Number(((maolirun / foterInter.changpingdinjia) * 100).toFixed(2)) : null
    const busuantuihuoROI = maolilv ? Number((1 / (maolilv / 100)).toFixed(2)) : null
    const yuguxiaoshouer = Number((foterInter.yuguxiaoshoushulian * foterInter.changpingdinjia).toFixed(2))
    const xiaohsouchengbeng = Number((foterInter.yuguxiaoshoushulian * jichuchengbeng).toFixed(2))
    const tuikuanjiner = Number(((foterInter.fahuoqiangtuihuolv + foterInter.fahuohoujintuikuanlv + foterInter.tuihuokuiakuanlv) / 100 * yuguxiaoshouer).toFixed(2))
    const pingtkouchushouxufei = Number(((yuguxiaoshouer - tuikuanjiner) * foterInter.pingtaikoudian / 100).toFixed(2))
    const kouchutuikuanhoudelvrun = Number((yuguxiaoshouer - xiaohsouchengbeng - pingtkouchushouxufei - tuikuanjiner).toFixed(2))
    const huishoujinger = Number((foterInter.chengbeng * foterInter.yuguxiaoshoushulian * (foterInter.tuihuokuiakuanlv / 100) * (foterInter.tuihuohuishoulv / 100) + jichuchengbeng * foterInter.yuguxiaoshoushulian * (foterInter.fahuoqiangtuihuolv / 100)).toFixed(2))
    const shijilirun = Number((kouchutuikuanhoudelvrun + huishoujinger).toFixed(2))
    const chunlirunlv = yuguxiaoshouer ? Number((shijilirun / yuguxiaoshouer * 100).toFixed(2)) : null
    const shijibaobenroi = chunlirunlv ? Number((1 / (chunlirunlv / 100)).toFixed(2)) : null
    const benyueguangaoroi = foterInter.guangaofeiad ? Number((yuguxiaoshouer / foterInter.guangaofeiad).toFixed(2)) : null
    const shijiyingli = Number((shijilirun - foterInter.qitachengyuangongzi - foterInter.zhubogonzhi - (foterInter.zhubotidian / 100) * shijilirun - (foterInter.qitachengyuangtidian / 100) * shijilirun - foterInter.fangzhushuidian - foterInter.guangaofeiad).toFixed(2))
    const tagstyle = {
        padding: '5px 10px',
        fontSize: '16px',
    }

    useEffect(() => {
        if (foterInter !== infoOrdData) {
            localStorage.setItem('foterInter', JSON.stringify(foterInter))
        }
    }, [foterInter])

    // function test() {
    //     const fpPromise = FingerprintJS.load()
    //     fpPromise
    //         .then((fp) => fp.get())
    //         .then(async (result) => {
    //             const {
    //                 // fonts, 
    //                 languages, // 语言，主次不同
    //                 // audio, 
    //                 screenResolution, // 分辨率
    //                 screenFrame, // 色域
    //                 deviceMemory, // 设备内存 影响域名
    //                 ...components } =
    //                 result.components
    //             const extendedComponents: any = {
    //                 ...components,
    //                 foo: { value: 'whatever' },
    //             }
    //             console.log('extendedComponen', extendedComponents)
    //             const fingerprintId =
    //                 FingerprintJS.hashComponents(extendedComponents)
    //         console.log('fingerprintId', fingerprintId)
    //             // upUserId(fingerprintId)
    //         })
    // }
    // test()
    return <>
        <Form size="small"
            labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}
            labelAlign="right"
        >
            <Form.Item
                label="基础成本（单个）">
                <Form.Item
                    labelCol={{ span: 4 }}
                    label="产品成本">
                    <InputNumber value={foterInter.chengbeng} unit="元" min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                chengbeng: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}
                    label="包装费用">
                    <InputNumber value={foterInter.baozhuang} unit="元" min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                baozhuang: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="快递费">
                    <InputNumber value={foterInter.kuaidi} unit="元" step={0.1} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                kuaidi: value
                            })
                        }
                        } />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="运费险">
                    <InputNumber unit="元" value={foterInter.yunfeixian} step={0.1} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                yunfeixian: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="其他相关">
                    <InputNumber unit="元" value={foterInter.qita} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                qita: value
                            })
                        }
                        }
                    />
                </Form.Item>
            </Form.Item>

            <Form.Item

                name="算出毛利（单个）"
                label="算出毛利（单个）">
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="基础成本">
                    <Tag bordered type={jichuchengbeng > 0 ? 'default' : 'error'} style={tagstyle}>
                        {jichuchengbeng}元
                    </Tag>

                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="产品定价">
                    <InputNumber unit="元" value={foterInter.changpingdinjia} min={0} step={0.1} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                changpingdinjia: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="平台扣点">
                    <InputNumber unit="%" value={foterInter.pingtaikoudian} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                pingtaikoudian: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="毛利润">
                    <Tag bordered type={maolirun > 0 ? 'default' : 'error'} style={tagstyle}>
                        {maolirun}元
                    </Tag>

                </Form.Item>
                <Form.Item
                    labelCol={{ span: 4 }}

                    label="毛利率">


                    <Tag bordered type={maolilv > 0 ? 'default' : 'error'} style={tagstyle}>
                        {maolilv ? maolilv + '%' : '/'}
                    </Tag>
                </Form.Item>
            </Form.Item>

            <Form.Item
                labelCol={{ span: 4 }}

                label="基础保本">
                <Form.Item
                    labelCol={{ span: 9 }}

                    label="不算退货率的保本roi">
                    {/* {busuantuihuoROI} */}
                    <Tag bordered type={busuantuihuoROI > 0 ? 'default' : 'error'} style={tagstyle}>
                        {busuantuihuoROI ? busuantuihuoROI : '/'}
                    </Tag>
                </Form.Item>
            </Form.Item>
            <Form.Item
                labelCol={{ span: 6 }}

                label="销售数据（月总汇）">
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="预估售卖数量">
                    <InputNumber unit="单" value={foterInter.yuguxiaoshoushulian} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                yuguxiaoshoushulian: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="预估销售额">
                    <Tag bordered style={tagstyle}>
                        {yuguxiaoshouer}元
                    </Tag>
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="销售成本">
                    <Tag bordered style={tagstyle}>
                        {xiaohsouchengbeng}元
                    </Tag>

                </Form.Item>
            </Form.Item>




            <Form.Item
                name="退货退款（月总汇）"
                label="退货退款（月总汇）">
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="发货前退款率">
                    <InputNumber unit="%" value={foterInter.fahuoqiangtuihuolv} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                fahuoqiangtuihuolv: value
                            })
                        }}
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="发货后仅退款率">
                    <InputNumber unit="%" value={foterInter.fahuohoujintuikuanlv} min={0} placeholder='请输入' onChange={(value: any) => {
                        setFoterInter({
                            ...foterInter,
                            fahuohoujintuikuanlv: value
                        })
                    }
                    } />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="发货后退货退款率">
                    <InputNumber unit="%" value={foterInter.tuihuokuiakuanlv} min={0} placeholder='请输入' onChange={(value: any) => {
                        setFoterInter({
                            ...foterInter,
                            tuihuokuiakuanlv: value
                        })
                    }} />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="退款金额">

                    <Tag bordered style={tagstyle}>
                        {tuikuanjiner + '元'}
                    </Tag>
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="平台扣除手续费">

                    <Tag bordered style={tagstyle}>
                        {pingtkouchushouxufei + '元'}
                    </Tag>
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 12 }}

                    label="扣除退款、手续费、成本后的利润">

                    <Tag bordered type={kouchutuikuanhoudelvrun > 0 ? 'default' : 'error'} style={tagstyle}>
                        {kouchutuikuanhoudelvrun + '元'}
                    </Tag>
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="退货回收率"
                    extra="退货回收率是指退回来的货，有多少是可以用的，例如我退回来了100件，有80件可以用，那么就是80除以100=80%，那么在回收率的地方，填写80即可。"
                >
                    <InputNumber unit="%" value={foterInter.tuihuohuishoulv} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                tuihuohuishoulv: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="回收金额">


                    <Tag bordered style={tagstyle}>
                        {huishoujinger + '元'}
                    </Tag>
                </Form.Item>
            </Form.Item>

            <Form.Item
                name="保本计算（月总汇）"
                label="保本计算（月总汇）">
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="实际利润">

                    <Tag bordered type={shijilirun > 0 ? 'default' : 'error'} style={tagstyle}>
                        {shijilirun + '元'}
                    </Tag>
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="纯利润率">
                    <Tag bordered type={chunlirunlv > 0 ? 'default' : 'error'} style={tagstyle}>
                        {chunlirunlv ? chunlirunlv + '%' : '/'}
                    </Tag>

                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="实际保本roi">

                    <Tag bordered type={shijibaobenroi > 0 ? 'default' : 'error'} style={tagstyle}>
                        {shijibaobenroi ? shijibaobenroi : '/'}
                    </Tag>
                </Form.Item>
            </Form.Item>

            <Form.Item
                name="硬性开销（月总汇）"
                label="硬性开销（月总汇）">
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="主播工资">
                    <InputNumber unit="元" value={foterInter.zhubogonzhi} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                zhubogonzhi: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="主播提点">
                    <InputNumber unit="%" value={foterInter.zhubotidian} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                zhubotidian: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="其他成员工资"
                    extra="（包括拍摄、剪辑、运营、客服等）"
                >
                    <InputNumber unit="元" value={foterInter.qitachengyuangongzi} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                qitachengyuangongzi: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="其他成员提点"
                >
                    <InputNumber unit="%" value={foterInter.qitachengyuangtidian} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                qitachengyuangtidian: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="房租+水电"
                >
                    <InputNumber unit="元" value={foterInter.fangzhushuidian} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                fangzhushuidian: value
                            })
                        }
                        }
                    />
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}

                    label="广告费"
                >
                    <InputNumber unit="元" value={foterInter.guangaofeiad} min={0} placeholder='请输入'
                        onChange={(value: any) => {
                            setFoterInter({
                                ...foterInter,
                                guangaofeiad: value
                            })
                        }
                        }
                    />
                </Form.Item>
            </Form.Item>
            <Form.Item
                name="最终结算（月总汇）"
                label="最终结算（月总汇）">
                <Form.Item
                    labelCol={{ span: 6 }}
                    name="本月广告roi"
                    label="本月广告roi">

                    <Tag bordered type={benyueguangaoroi > 0 ? 'default' : 'error'} style={tagstyle}>
                        {benyueguangaoroi ? benyueguangaoroi : '/'}
                    </Tag>
                </Form.Item>
                <Form.Item
                    labelCol={{ span: 6 }}
                    name="实际盈利"
                    label="实际盈利">

                    <Tag bordered type={shijiyingli > 0 ? 'default' : 'error'} style={tagstyle}>
                        {shijiyingli + '元'}
                    </Tag>
                </Form.Item>
            </Form.Item>
        </Form>
    </>
}

export default ROIcompute